<template>
        <div class="mui-numbox" data-numbox-min='0' :data-numbox-max="max" >
            <!-- "-"按钮，点击可减小当前数值 -->
            <button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
            <input class="mui-numbox-input" type="number" value='1' @change="countChanged" ref="num"/>
            <!-- "+"按钮，点击可增大当前数值 -->
            <button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
        </div>  
</template>
<script>
// 导入MUI的JS文件
import mui from '../lib/mui-master/examples/hello-mui/js/mui.min.js'
export default {
    data(){
        return {}
    },
    methods:{
        // 每当文本框的数据被修改的时候，立即把最新的数据，通过事件调用机制，传给父组件
        countChanged(){
            // console.log(this.$refs.num.value);
            if(this.$refs.num.value >this.max){
                this.$emit('getCount',parseInt(this.max));
            }else{
                this.$emit('getCount',parseInt(this.$refs.num.value));
            }
        }
    },
    mounted(){
        mui(".mui-numbox").numbox();
    },
    props:['max'],
    watch:{
        // 监听属性：
        max:function(newval, oldval){
            // 当父组件获取到库存量前，传给此子组件的max为undefined；当父组件获取到库存量后，传给max为数值，watch监听到max改变，立刻调用函数将input标签设置了最大值。
            mui('.mui-numbox').numbox().setOption('max',max);
        }
    }
}
</script>
<style lang="scss">

</style>


